<!DOCTYPE html>
<html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#div2 {
    motion-rotation: auto;
}
#div3 {
    motion-rotation: reverse;
}
#div4 {
    motion-rotation: 180deg;
}
#div5 {
    motion-rotation: 0rad;
}
#div6 {
    motion-rotation: -400grad auto;
}
#div7 {
    motion-rotation: 2turn reverse;
}
#div8 {
    motion-rotation: reverse 30deg;
}
#div9 {
    motion-rotation: inherit;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8">
    <div id="div9"></div>
    <div id="div10"></div>
</div>
<span id="span1" style="motion-rotation: auto -45deg"></span>

<script>
"use strict";

test(function() {
    assert_equals(getComputedStyle(div1, null).motionRotation, 'auto 0deg');
}, 'motion-rotation default is auto');

test(function() {
    assert_equals(getComputedStyle(div2, null).motionRotation, 'auto 0deg');
}, 'motion-rotation auto expands to auto 0deg');

test(function() {
    assert_equals(getComputedStyle(div3, null).motionRotation, 'auto 180deg');
}, 'motion-rotation reverse expands to auto 180deg');

test(function() {
    assert_equals(getComputedStyle(div4, null).motionRotation, '180deg');
}, 'motion-rotation can be a fixed angle');

test(function() {
    assert_equals(getComputedStyle(div5, null).motionRotation, '0deg');
}, 'motion-rotation angles are converted to degrees');

test(function() {
    assert_equals(getComputedStyle(div6, null).motionRotation, 'auto -360deg');
}, 'motion-rotation can be supplied with angle before auto');

test(function() {
    assert_equals(getComputedStyle(div7, null).motionRotation, 'auto 900deg');
}, 'motion-rotation can be supplied with angle before reverse');

test(function() {
    assert_equals(getComputedStyle(div8, null).motionRotation, 'auto 210deg');
}, 'motion-rotation is unaffected by child elements');

test(function() {
    assert_equals(getComputedStyle(div9, null).motionRotation, 'auto 210deg');
}, 'motion-rotation can be explicitly inherited');

test(function() {
    assert_equals(getComputedStyle(div10, null).motionRotation, 'auto 0deg');
}, 'motion-rotation is not inherited by default');

test(function() {
    assert_equals(span1.style.motionRotation, 'auto -45deg');
}, 'motion-rotation style can be set inline');

</script>
</body>
</html>
